<template>
    <div class="sub_content">
        <el-container class="base_details_container">
            <BackTitleView :title="title" />
            <el-main>
                <div class="content">
                    <div class="base_details_title">房型库存</div>
                    <div class="base_details_content_second">
                        <StockRoomConfigure ref="roomConfigure" :data="roomConfigureData" :readOnly="readOnly" />
                    </div>
                </div>
            </el-main>
            <el-footer>
                <el-button @click="route.go(-1)" v-show="activeName === 'basic'">取消</el-button>
                <!-- <el-button @click="save(true)" type="primary" v-if="!readOnly">保存并提交审核</el-button> -->
            </el-footer>
        </el-container>
    </div>
</template>

<script setup>
import BackTitleView from "@com/BackTitleView.vue";
import { ref } from 'vue';
import useRoute from "@util/router";
import StockRoomConfigure from "@com/hotel/StockRoomConfigure.vue";
import api from "@api/hotel"
import { $box, $msg } from "@/common/ui/msg";
import $ from "@util/base"

const route = useRoute()
const urlQuery = route.query()
var readOnly = false
var title = "酒店库存"
getData()

const activeName = ref("basic");

function tabChange(active) {
    activeName.value = active
}

const noticeTemplate = {
    title: null,
    intro: null
}
const noticeData = ref([])
const noticeDynamic = ref(null)

const roomConfigureData = ref([])
const roomConfigure = ref(null)

const facility = ref([])
const catering = ref([])
const starOptions = ref([])
// const baseOptions = ref([])
const typeOptions = ref([])
getConfig()

function getConfig() {
    api.facility(val => facility.value = val)
    api.catering(val => catering.value = val)
    api.star(val => starOptions.value = val)
    // api.base(val => baseOptions.value = val)
    api.category(val => typeOptions.value = val)
}
const basicFormRef = ref(null)

const basicForm = ref({
    id: null,
    categoryCode: null,
    hotelName: null,
    // shopCode: null,
    star: null,
    address: null,
    lat: null,
    lng: null,
    picList: [],
    descList: [],
    facility: [],
    catering: [],
    flowStatus: null,
    flowCode: null
})

const basicRules = {
    categoryCode: [{
        required: true,
        message: '请选择酒店分类',
        trigger: 'change',
    }],
    hotelName: [{
        required: true,
        message: '请输入酒店名称',
        trigger: 'blur',
    }],
    // shopCode: [{
    //     required: true,
    //     message: '请选择归属基地',
    //     trigger: 'change',
    // }],
    star: [{
        required: true,
        message: '请选择酒店星级',
        trigger: 'change',
    }],
    address: [{
        required: true,
        message: '请填入地址',
    }]
}

function selectAddress(data) {
    basicForm.value.lat = data.lat + ""
    basicForm.value.lng = data.lng + ""
    basicForm.value.address = data.address
}

function back() {
    route.go(-1)
}

function getNoticeDynamic() {
    let data = noticeDynamic.value.getValue()
    return data
    // data.remove(e => { return $.isEmpty(e.title) && $.isNull(e.intro) })
    // if (data.length <= 0) {
    //     $msg.error("请设置须知")
    //     return false
    // } else {
    //     for (const item of data) {
    //         if ($.isEmpty(item.title)) {
    //             $msg.error("请输入须知标题")
    //             return false
    //         }
    //         if ($.isNull(item.intro)) {
    //             $msg.error("请输入须知内容")
    //             return false
    //         }
    //     }
    //     return data
    // }
}

function save(isExamine) {
    basicFormRef.value.validate(valid => {
        if (valid) {
            let roomData = roomConfigure.value.getValue()
            let noticeData = getNoticeDynamic()
            let baseicData = $.deepCopy(basicForm.value)
            if ($.isNull(baseicData.lat) || $.isNull(baseicData.lng)) {
                $msg.error("请在地图中选择酒店地址")
                return
            }
            if ($.isNotEmpty(baseicData.facility)) {
                baseicData.facility = baseicData.facility.join(",")
            } else {
                baseicData.facility = null
            }
            if ($.isNotEmpty(baseicData.facility)) {
                baseicData.catering = baseicData.catering.join(",")
            } else {
                baseicData.catering = null
            }
            if (roomData != false
                // && noticeData != false
            ) {
                let paramsData = {
                    isPass: isExamine ? 2 : 1,   // 是否提交审核 1 不提交 2提交审核
                    hotelItem: baseicData,
                    roomSetUp: {
                        hotelRoomItems: roomData,
                        hotelTipItems: noticeData
                    }
                }
                $.handleCRU(urlQuery.type, {
                    add: () => {
                        api.add(paramsData, () => {
                            $msg.succ("保存成功")
                            route.go(-1)
                        })
                    },
                    modify: () => {
                        paramsData.roomSetUp.hotelRoomItems = roomItemDelHander(roomData)
                        api.update(paramsData, () => {
                            $msg.succ("保存成功")
                            route.go(-1)
                        })
                    }
                })
            }
        } else {
            $msg.error("请完善基本信息")
        }
    })
}

// 被删除的房型数据还在只是设置flag为0
function roomItemDelHander(roomData) {
    if (oldHotelRoomItems) {
        for (const item of oldHotelRoomItems) {
            if (roomData.find(e => { return e.id === item.id }) == null) {
                roomData.push({ id: item.id, flag: 0 })
            }
        }
    }
    console.log(roomData)
    return roomData
}

var oldHotelRoomItems = null
function getData() {
    api.details(route.query().code, val => {
        let hotelItem = val.hotelItem
        if ($.isNotEmpty(hotelItem.facility)) {
            hotelItem.facility = hotelItem.facility.split(",").map(e => { return parseInt(e) })
        } else {
            hotelItem.facility = []
        }
        if ($.isNotEmpty(hotelItem.facility)) {
            hotelItem.catering = hotelItem.catering.split(",").map(e => { return parseInt(e) })
        } else {
            hotelItem.catering = []
        }
        basicForm.value = hotelItem
        roomConfigureData.value = val.roomSetUp.hotelRoomItems
        noticeData.value = val.roomSetUp.hotelTipItems

        oldHotelRoomItems = val.roomSetUp.hotelRoomItems
    })
}

// 审批通过
function approvalPass() {
    $box.open("通过", "确认该商品审批通过", () => {
        api.approval(basicForm.value.flowCode, '1007004', '', () => {
            $msg.succ("审批成功")
            route.go(-1)
        })
    })
}

// 驳回
function approvalRefusal() {
    $box.input("确认驳回", "驳回原因", null, val => {
        api.approval(basicForm.value.flowCode, '1007003', val, () => {
            $msg.succ("驳回成功");
            route.go(-1)
        })
    });
}
</script>

<style lang="scss">
.sub_content {
    height: 100%;
}

.selectMap {
    margin-top: 20px;
}
</style>
